<template lang="pug">
  transition(name="fade")
    .notification
      span.content {{ content }}
      a.btn(@click="handleClose") {{ btn }}
</template>
<script>
export default {
  name: 'Notification',
  props: {
    content: {
      type: String,
      required: true
    },
    btn: {
      type: String,
      default: '关闭'
    }
  },
  data () {
    return {

    }
  },
  methods: {
    // 错误的
    // Missing space before function parentheses(要求在函数括号之前有一个空格)
    // Missing space before opening brace(左括号前丢了空格)
    // handleClose(e){
    //   e.preventDefault();
    //   this.$emit('close');
    // },

    // 正确的
    handleClose (e) {
      e.preventDefault()
      this.$emit('close')
    }
  }
}
</script>
<style lang="sass" scoped>
  .notification
    display: flex
    background-color: #303030
    color: rgba(255, 255, 255, 1)
    align-items: center
    padding: 20px
    position: fixed
    min-width: 100%
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.2)
    flex-wrap: wrap
    transition: all .3s
  .content
    padding: 0
  .btn
    color: #FF4081
    padding-left: 24px
    margin-left: auto
    cursor: pointer
</style>
